<template>
<div class="category">
  <div class="header">
    <div class="itemCateListHd">
        <router-link to="/search" class="itemCateList">
          <van-icon size="20" class="search" name="search"/>
          <span class="placeholder">搜索商品, 共{{total}}款好物</span>
      </router-link>
    </div>
  </div>
  
  <div class="content">
    <div class="left">
       <div class="left-list" v-for="(item) in category1List" :key="item.id">
         <div class="left-item" @click="changePage(item.id)" :class="{active:currentCategory.id === item.id}" >{{ item.name }}</div>
       </div>
    </div>
    <div class="right">
        <div class="view-header" >
          <img class="right-img" :src="picUrl">
        </div>
        <div class="view-list" >
          <div class="cateList" v-for="item in categoryGroupList" :key="item.id">
            <div class="hd">{{ item.name}}</div>
            <div class="list-item">
              <div class="good-item" v-for="aa in item.categoryList" @click="todetail(aa.superCategoryId,aa.id,aa.categoryType)">
                <img class="item-img" :src="aa.wapBannerUrl" >
               <span>{{aa.name}}</span>
              </div>
           </div>
         </div>
        </div>
    </div>
  </div>
</div>
<Tabbar></Tabbar>

</template>

<script lang="ts">
  import { defineComponent } from "vue"

 
  export default defineComponent({
    name:'Category',
  })
</script>

<script lang="ts" setup>
import Tabbar from "@/components/Tabbar/index.vue";
import { onMounted,ref} from "vue";
import {useCategoryStore} from "@/stores/moduls/category"
import { storeToRefs } from "pinia";
import { useRoute,useRouter } from "vue-router";
const categoryStore = useCategoryStore()
const categoryId = ref<string|number>('')

// 封装函数
function getCategoryListData(){
  categoryStore.getCategoryList(categoryId.value as string)
}
// 点击跳转到每一个对应页
onMounted(()=>{
  getCategoryListData()
  categoryStore.getTotalProject()

})
// 点击跳转到页面详情
const router = useRouter()
function todetail(a:number|string,b:number,c:number){
  router.push({
        path: "/list",
        query:{
          categoryId:a,
          subCategoryId:b,
          categoryType:c
        }
    })
    // console.log(a,b,c)
}

// 获取列表数据
let {category1List,currentCategory,categoryGroupList,picUrl,total} = storeToRefs(categoryStore)


// 点击切换不同页面
function changePage(id:number){
  categoryId.value = id
  getCategoryListData()
  
}


</script>

<style scoped lang="less">
.category{
  width:375px;
  position: relative;
  
  .header{
    height:44px;
    width:375px;
    border-bottom: 1px solid #ccc;
    position: fixed;
    top: 0;
    background-color: #fff;
    .itemCateListHd{
      // border: 1px solid blue;
      margin: 0 auto;
      width: 345px;
      height:44px;
      line-height: 44px;
      display: flex;
      align-items: center;
      .itemCateList{
        height: 28px;
        width:345px;
        line-height: 28px;
        text-align: center;
        margin-top: 5px;
        background-color:#ededed;
        font-size: 14px;
        border-radius: 5px;
        color:#666;
        position: relative;
         .search{
            width:14px;
            height:14px;
            position:absolute;
            left:70px;
            top:5px
         }
      }
    }
  }
  .content{
    display: flex;
    padding-top:40px;
    padding-bottom: 50px;
    overflow: hidden;
    .left{
      width:81px;
      padding: 15px 0;
      min-height: 547px;
      // border: 1px solid blue;
      .left-list{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // border: 1px solid green;
        .left-item{
        width:81px;
        height:20px;
        line-height: 20px;
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        border-left: 3px solid transparent;
        &.active{
          color:#ab2b2b;
          border-left: 3px solid #ab2b2b;
          box-sizing: border-box;
         }
        } 
       
      }
    }
    .right{
      padding: 15px 15px 10.5px 15px;
      border-left:1px solid #ccc;
     
      .view-header{
        width: 264px;
        height:96px;
        background-color: #eee;
        .right-img{
            width: 264px;
            height:96px;
        }
      }
      .view-list{
        width: 100%;
          .cateList{
            font-size: 14px;
            color:#333;
            // line-height: ;
              .hd{
                text-overflow:ellipsis;
                white-space: nowrap;
                padding-bottom: 8px;
                margin-top: 15px;
                text-align: left;
                font-size: 14px;
                font-weight: 700;
                color: #333;
                border-bottom: 1px solid #d9d9d9;
              }
          }
          .list-item{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .good-item{
                display:flex;
                width: 33%;
                flex-direction: column;
                align-items: center;
              .item-img{
                width:72px;
                height:72px;
              }
            }
          }
      }
    }
  }
}
</style>